<template>
  <!--selector-->
  <div class="clearfix selector">
    <div class="type-wrap logo">
      <!-- 品牌的地方 -->
      <div class="fl key brand">品牌</div>
      <div class="value logos">
        <ul class="logo-list">
          <li
            v-for="data in trademakeList"
            :key="data.id"
            @click="clickTrade(data)"
          >
            {{ data.tmName }}
          </li>
          <li><img src="@/assets/images/search/phone06.png" /></li>
          <li><img src="@/assets/images/search/phone07.png" /></li>
          <li><img src="@/assets/images/search/phone08.png" /></li>
          <li><img src="@/assets/images/search/phone09.png" /></li>
          <!-- <li><img src="@/assets/images/search/phone10.png" /></li>
          <li><img src="@/assets/images/search/phone11.png" /></li>
          <li><img src="@/assets/images/search/phone12.png" /></li>
          <li><img src="@/assets/images/search/phone12.png" /></li>
          <li><img src="@/assets/images/search/phone14.png" /></li>
          <li><img src="@/assets/images/search/phone01.png" /></li>
          <li><img src="@/assets/images/search/phone06.png" /></li>
          <li><img src="@/assets/images/search/phone07.png" /></li>
          <li><img src="@/assets/images/search/phone02.png" /></li> -->
        </ul>
      </div>
      <div class="ext">
        <a href="javascript:void(0);" class="sui-btn">多选</a>
        <a href="javascript:void(0);">更多</a>
      </div>
    </div>
    <!-- 商品属性 -->
    <div class="type-wrap" v-for="data in attrsList" :key="data.attrId">
      <div class="fl key">{{ data.attrName }}</div>
      <div class="fl value">
        <ul class="type-list">
          <li v-for="(info, i) in data.attrValueList" :key="i">
            <a @click="clickAttr(data,info)">{{ info }}</a>
          </li>
        </ul>
      </div>
      <div class="fl ext"></div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['trademakeList', 'attrsList'])
  },
  methods: {
    clickTrade(trade) {
      this.$emit('eventTrade', trade)
    },
    clickAttr(attr, info) {
      this.$emit('eventAttr', attr, info)
    }
  }
}
</script>

<style></style>
